<template>
<div class="scroller-part"
  ref="scroller"
  :style="[
    bodyContainerStyle,
    containerStyle,
    {
      'overflow-x': isHorizontalSroll ? 'auto' : false,
      'overflow-y': isVerticalSroll ? 'auto' : false,
    }
  ]">
  <slot
  
  ></slot>
</div>
</template>
<script>
const zepto = require('npm-zepto')
const Hammer = require('../lib/hammer.min')
import { mapActions, mapState } from 'vuex'

export default {
  props: {
    containerStyle: {},
    isHorizontalSroll: {
      default: true
    },
    isVerticalSroll: {
      default: true
    }
  },
  data () {
    return {
      bodyContainerStyle: {},
      resized: false,
      scroller: null,
      id: '',
    }
  },
  methods: {
    getClientRectTop () {
      return this.scroller.getBoundingClientRect().top
      
    },
    getId () {
      return Math.round(Math.random() * 1000000000000)
    },
    calcalute () {
      const offsetTop = this.getClientRectTop()
      const windowHeight = window.innerHeight
      const scrollerHeight = windowHeight - offsetTop
      
      this.scrollerHeight = scrollerHeight
      this.scrollWidth = this.scroller.offsetWidth

      // (function () { console.log(arguments) }) (this.scroller)
      this.bodyContainerStyle = {
        ...this.bodyContainerStyle,
        height: scrollerHeight + 'px'
      }
      this.$nextTick(() => {      
        this.resized = true
        console.log('resized', scrollerHeight)
        this.$emit('resized')
      })
    },
    blockOverscroll () {
      const el = this.scroller
      var preventHistoryBack = function (e) {
        var delta = e.deltaX || e.wheelDeltaX;
        if (! delta) {
          return;
        }
        window.WebKitMediaKeyError /*detect safari*/ && (delta *= -1);
        if (((el.scrollLeft + el.offsetWidth) === el.scrollWidth && delta > 0) || (el.scrollLeft === 0 && delta < 0) ) {
          e.preventDefault();
        }
      };
      el.addEventListener('mousewheel', preventHistoryBack);
    },
    initResize () {
      zepto(window)
        .on('resize.scrollerPart' + this.id, () => {
          this.resized = false
          this.$nextTick(() => {
            this.calcalute()
          })
        })
    },
    ...mapActions({
      updateChangeTabTime: 'updateChangeTabTime'
    })
  },
  watch: {
    changeTabTime (value) {
      this.resized = false
      this.$nextTick(() => {
        this.calcalute()
      })
    }
  },
  destroyed () {
    zepto(this.scroller).off('resize.scrollerPart' + this.id)
    zepto(this.scroller).off('touchstart.scrollPart' + this.id)
    zepto(this.scroller).off('touchmove.scrollPart' + this.id)
  },
  computed: {
    ...mapState({
      changeTabTime: state => state.tab.changeTabTime
    })
  },
  beforeMount () {
    this.id = this.getId()
  },
  mounted () {
    this.scroller = this.$refs.scroller
    this.$nextTick(() => {
      this.calcalute()
    })
    this.initResize()
    // this.blockOverscroll()
  }
}
</script>
<style lang="scss">
  .scroller-part {
    -webkit-overflow-scrolling: touch;
    overscroll-action: no-navigation-x;
  }
</style>


